<template>
  <el-dialog title="查看班级教具" :visible.sync="dialogVisible" @close="$emit('update:visible',false)" width="60%">
    <div class="dialog_conwrap mb-20">
      <div class="applycartlist">
        <div class="applyTitle mb-10">
          选择查询班级：
          <el-select v-model="editForm.section_id" placeholder="请选择年段" @change="sectionChange" size="small"
                     class="w-140 mr-10">
            <el-option :label="item.section_name" :value="item.id" v-for="(item, index) in sectionList"
                       :key="index"></el-option>
          </el-select>
          <el-select v-model="editForm.class_id" placeholder="请选择班级" size="small" class="w-140 mr-10">
            <el-option :label="item.class_name" :value="item.id" v-for="(item, index) in classesList"
                       :key="item.id"></el-option>
          </el-select>
          <el-button type="primary" size="small" @click="searchClass">查询</el-button>
          <el-button @click.native="downexcel" size="small" class="mr-10">教辅具导出Excel</el-button>
        </div>
        <el-table
                ref="multipleTable"
                :data="arryList"
                :stripe="tableStripe"
                :border="tableBorder"
                tooltip-effect="dark"
                style="width: 100%"
                height="400"
                header-cell-class-name="table-text-c"
                cell-class-name="table-text-c">
          <el-table-column
                  label="教具名称"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.tools.name}}
            </template>
          </el-table-column>
          <el-table-column
                  prop="num"
                  label="教具类目"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.tools.cate?scope.row.tools.cate.name:'未知'}}
            </template>
          </el-table-column>
          <el-table-column
                  prop="num"
                  label="数量"
                  width="120"
                  align="center">
          </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="page.total"
                  :page-size="page.pagesize"
                  @current-change="handleSizeChange">
          </el-pagination>
        </el-col>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closePage" size="small">返回教具管理</el-button>
      <!--<el-button type="primary" size="small" @click="formCheck">确认申请</el-button>-->
    </span>
  </el-dialog>
</template>
<script>
  import {pagination, tableoption} from '@/utils/util.js'

  export default {
    name: 'Dialog',
    props: ['visible'],
    watch: {
      visible () {
        this.dialogVisible = this.visible
        if (this.visible) {
          this.classList()
        } else {
          this.arryList = []
          this.page.pageindex = 1
        }
      }
    },
    data () {
      return {
        editForm: {
          section_id: '',
          class_id: ''
        },
        sectionList: [],
        classesList: [],
        dialogVisible: this.visible,
        tableStripe: true, // 是否斑马栏
        tableBorder: true, // 单元格右边边框
        arryList: [],
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        }
      }
    },
    created () {
    },
    methods: {
      searchClass () {
        console.log('搜索内容信息：', this.editForm)
        if (!this.editForm.class_id) {
          this.$message.error('请选择搜索教具得班级')
          return
        }
        this.$fetch(this.api.tearch.search, {
          class_id: this.editForm.class_id,
          p: this.page.pageindex
        }).then((response) => {
          console.log('数据：', response)
          if (response.code === 0) {
            this.arryList = response.list.data
            this.page.total = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
        // let data = await this.axios.post(this.api.tearch.search, {class_id:this.editForm.class_id});
        // console.log(data)
      },
      handleSizeChange (val) {
        this.page.pageindex = val
        this.searchClass()
      },
      classList () {
        // 年段
        this.$fetch(this.api.user_sectionindex, {p: this.page.pageindex}).then((response) => {
          if (response.code === 0) {
            this.sectionList = response.list.data
            this.classSecondList()
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      classSecondList () {
        // 班级
        this.$fetch(this.api.user_classesindex, {p: this.page.pageindex}).then((response) => {
          if (response.code === 0) {
            let array_ = {}
            for (let i in response.list.data) {
              let new_array = array_[response.list.data[i].section_id] || []
              new_array.push(response.list.data[i])
              array_[response.list.data[i].section_id] = new_array
            }
            this.classesListNew = array_
            console.log('班级信息:', array_)
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      sectionChange (val) {
        for (let i in this.sectionList) {
          if (this.sectionList[i].id === val) {
            this.classesList = this.classesListNew[this.sectionList[i].section_name]
            return
          }
        }
      },
      closePage () {
        this.dialogVisible = false
        this.editForm.section_id = ''
        this.editForm.class_id = ''
        this.arryList = []
      },
      // 导出教辅具
      downexcel () {
        // book/export
        console.log('下载得内容班级:', this.editForm, this.classesList)
        if (!this.editForm.class_id) {
          this.$message.error('请选择导出教具得班级')
          return
        }
        let titleName = ''
        for (let i in this.classesList) {
          if (this.classesList[i].id === this.editForm.class_id) {
            titleName = this.classesList[i].class_name
          }
        }
        // this.editForm
        this.$http({
          method: 'get',
          url: `${this.$BASE_URL}/admin/` + this.api.tearch.toolsExport + '?section_id=' + this.editForm.section_id + '&class_id=' + this.editForm.class_id,
          responseType: 'arraybuffer'
        })
          .then(
            function (response) {
              let filename = titleName + '-班级教具.xlsx'
              this.fileDownload(response.data, filename)
            }.bind(this)
          )
          .catch(
            function (error) {
              alert('网络请求出错')
            }
          )
      },
      fileDownload (data, fileName) {
        let blob = new Blob([data], {
          type: 'application/octet-stream'
        })
        let filename = fileName || 'filename.xls'
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(blob, filename)
        } else {
          let blobURL = window.URL.createObjectURL(blob)
          let tempLink = document.createElement('a')
          tempLink.style.display = 'none'
          tempLink.href = blobURL
          tempLink.setAttribute('download', filename)
          if (typeof tempLink.download === 'undefined') {
            tempLink.setAttribute('target', '_blank')
          }
          document.body.appendChild(tempLink)
          tempLink.click()
          document.body.removeChild(tempLink)
          window.URL.revokeObjectURL(blobURL)
        }
      }
    }
  }
</script>

